<template>
  <div class="bottom-menu">
    <div class="left">
      <Button
        class="button"
        :checked="isAllChecked"
        @click.native="allChecked"
      ></Button>
      <span>全选</span>
      <span class="total-price">合计: ¥{{ totalRrice }}</span>
    </div>
    <div class="right">
      <span>去计算 ({{ checkedLength }})</span>
    </div>
  </div>
</template>

<script>
import Button from './cartbutton.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'BottomBar',
  components: {
    Button,
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['productList']),
    //计算商品总价格
    totalRrice() {
      return this.productList
        .filter((item) => {
          return item.checked
        })
        .reduce((pre, item) => {
          return pre + item.Price * item.const
        }, 0)
        .toFixed(2)
    },
    checkedLength() {
      return this.productList.filter((item) => item.checked).length
    },
    // 全选
    isAllChecked() {
      if (this.productList.length === 0) {
        return false
      }
      return !this.productList.find((item) => item.checked === false)
    },
  },
  methods: {
    allChecked() {
      if (this.isAllChecked) {
        this.productList.forEach((item) => {
          item.checked = false
        })
      } else {
        this.productList.forEach((item) => {
          item.checked = true
        })
      }
    },
  },
}
</script>
<style scoped>
.bottom-menu {
  height: 40px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 42px;
  background: rgb(241, 241, 241);
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #888;
}
.button {
  width: 15px;
  height: 15px;
}
.left {
  display: flex;
  align-items: center;
  width: 70%;
  height: 100%;
  margin-left: 23px;
}
.right {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: orangered;
  color: #fff;
}
.total-price {
  margin-left: 24px;
  font-size: 15px;
  color: #666;
}
</style>
